<template>
  <div class="team-add">
    <!-- 上面的部分 -->
    <div class="top">
      <div>
        <!-- 伪类部分 -->
        <div>
          <span class="top-team">新增团队信息</span>
        </div>
      </div>
    </div>
    <hr />
    <!-- 中间的部分 -->
    <div class="team-middle">
      <div class="team-middle-words">团队信息</div>
      <div style="display: flex">
        <div style="display: flex">
          <el-form ref="ruleFormRef" class="demo-ruleForm" :size="formSize" status-icon>
            <div style="
                display: flex;
                justify-content: space-between;
                text-align: left;
              ">
              <el-form-item label="团队编号" :style="{ width: '300px' }">
                20000
              </el-form-item>
              <el-form-item label="团队名称" prop="name" :style="{
                width: '300px',
              }">
                <el-input v-model="AddTeamData.name" />
              </el-form-item>
            </div>
            <div style="display: flex; justify-content: space-between">
              <el-form-item label="所属机构" :style="{
                width: '500px',
              }">
                <el-select class="m-2" placeholder="请选择" size="large" v-model="AddTeamData.organId" @change="getLabel">
                  <el-option v-for="(item, index) in arr" :key="index" :label="(item.name as string)" :value="item.id" />
                </el-select>
              </el-form-item>
              <el-form-item label="团队标签" :style="{ width: '300px' }">
                <el-select multiple="true" class="m-2" placeholder="请选择" size="large" v-model="showOption"
                  ref="selectRef">
                  <el-checkbox @change="changeAllSelect" v-model="all_selcect"></el-checkbox>全选

                  <el-option v-for="(option, index) in arr2" :key="option.id" :label="option.name" :value="option.id">
                    <template #default>
                      <div>
                        <el-checkbox @change="checkboxchange(option)" v-model="arr3[index]">
                          {{ option.name }}
                        </el-checkbox>
                      </div>
                    </template>
                  </el-option>
                  <div>
                    <el-button @click="resetOption">取消</el-button>
                    <el-button @click="saveOptin">确定</el-button>
                  </div>
                </el-select>
              </el-form-item>
            </div>

            <!-- <el-form-item>
             
            </el-form-item> -->
          </el-form>
        </div>
        <div style="margin-left: 200px">
          <div style="display: flex; align-items: center">
            <span style="margin-right: 5px">机构图片</span>
            <Upload @getPicUrl="getPic" :picture="pic" :flag="false"></Upload>
          </div>
        </div>
      </div>
      <hr />
      <!-- 团队成员 -->
      <div class="team-menenber">
        <div>团队成员(1)</div>
        <el-card shadow="always" style="
            width: 345px;
            height: 180px;
            margin-left: 5px;
            margin-top: 20px;
            position: relative;
          ">
          <div style="display: flex">
            <div style="width: 80px; position: relative">
              <img style="width: 80px; aspect-ratio: 1 / 1" :src="`http://127.0.0.1:3000/${doctorCardInfo.picture}`" />
              <span style="
                  font-size: 10px;
                  position: absolute;
                  left: 5px;
                  top: 65px;
                  background-color: orange;
                  padding: 5px;
                  border-radius: 3px;
                  color: white;
                ">团队长</span>
            </div>
            <div style="margin-left: 15px">
              <div style="display: flex; align-items: center">
                <div v-if="doctorCardInfo.name" style="margin-right: 10px">
                  {{ doctorCardInfo?.name }}
                </div>
                <div v-if="doctorCardInfo?.role" style="color: gray; font-size: 16px">
                  <div>{{ doctorCardInfo.role }}</div>
                </div>
              </div>
              <div style="font-size: 10px; color: gray; margin-top: 10px">
                <span>签约人数</span>&nbsp;&nbsp;&nbsp;<span>{{
                  doctorCardInfo.signCount.signCount
                }}</span>
              </div>
              <div style="margin-top: 10px">
                <el-tag>高血压</el-tag>
                &nbsp;&nbsp;
                <el-tag>老年护理</el-tag>
              </div>
            </div>
          </div>
          <div>
            <el-button style="position: absolute; right: 10px; bottom: 10px" @click="doctorInfo">医师详情</el-button>
          </div>
        </el-card>
      </div>
      <!-- 服务包 -->
      <div class="team-menenber">
        <div>服务包(1)</div>
        <el-card shadow="always" style="
            width: 345px;
            height: 180px;
            margin-left: 5px;
            margin-top: 20px;
            position: relative;
          ">
          <div style="display: flex">
            <div style="width: 80px; position: relative">
              <img style="width: 80px; aspect-ratio: 1 / 1" :src="`http://127.0.0.1:3000/${doctorCardInfo.picture}`" />
              <span style="
                  font-size: 10px;
                  position: absolute;
                  left: 5px;
                  top: 65px;
                  background-color: orange;
                  padding: 5px;
                  border-radius: 3px;
                  color: white;
                ">团队长</span>
            </div>
            <div style="margin-left: 15px">
              <div style="display: flex; align-items: center">
                <div v-if="doctorCardInfo.name" style="margin-right: 10px">
                  {{ doctorCardInfo?.name }}
                </div>
                <div v-if="doctorCardInfo?.role" style="color: gray; font-size: 16px">
                  <div>{{ doctorCardInfo.role }}</div>
                </div>
              </div>
              <div style="font-size: 10px; color: gray; margin-top: 10px">
                <span>签约人数</span>&nbsp;&nbsp;&nbsp;<span>{{
                  doctorCardInfo.signCount.signCount
                }}</span>
              </div>
              <div style="margin-top: 10px">
                <el-tag>高血压</el-tag>
                &nbsp;&nbsp;
                <el-tag>老年护理</el-tag>
              </div>
            </div>
          </div>
          <div>
            <el-button style="position: absolute; right: 10px; bottom: 10px" @click="doctorInfo">医师详情</el-button>
          </div>
        </el-card>
      </div>
      <div>
        <el-button type="primary" @click="saveTeam"> 保存 </el-button>
        <el-button @click="goback">返回</el-button>
      </div>
    </div>
  </div>
  <!-- 新增团队的医生详情 -->
  <el-drawer v-model="drawer" title="医生信息" :direction="direction" size="55%">
    <div style="width: 70%">
      <div style="display: flex; justify-content: space-between">
        <div>医生编号：{{ doctorCardInfo.number }}</div>
        <div>医生姓名：{{ doctorCardInfo.name }}</div>
      </div>
      <div style="
          margin-top: 20px;
          display: flex;
          justify-content: space-between;
          align-items: center;
        ">
        <div style="display: flex; align-items: center">
          <div>医生头像：</div>

          <img style="width: 50px" :src="`http://127.0.0.1:3000/${doctorCardInfo.picture}`" />
        </div>
        <div>性别:{{ doctorCardInfo.gender }}</div>
      </div>
      <div style="margin-top: 20px">角色：{{ doctorCardInfo.role }}</div>
    </div>
    <div style="margin-top: 20px">
      医生简介：{{ doctorCardInfo.description }}
    </div>
    <div style="margin-top: 20px">医生擅长:{{ doctorCardInfo.adept }}</div>
    <hr style="margin-top: 20px" />
    <div style="margin-top: 20px; display: flex">
      <div>加入团队&nbsp;&nbsp;&nbsp;</div>
      <div>
        <div style="margin-bottom: 20px" v-for="(item, index) in teamDetail" :key="index">
          {{ item.oname }}/{{ item.tname }}
        </div>
      </div>
    </div>
    <div>
      签约人数&nbsp;&nbsp;&nbsp;{{ doctorCardInfo.signCount.signCount }}
    </div>
    <div style="margin-top: 20px">
      创建时间&nbsp;&nbsp;&nbsp;{{ doctorCardInfo.createTime }}
    </div>
    <div style="margin-top: 20px">
      创建人&nbsp;&nbsp;&nbsp;{{ doctorCardInfo.creatorName }}
    </div>
    <div style="margin-top: 20px">
      账号状态:
      <el-switch v-model="value3" inline-prompt active-text="启用" inactive-text="禁用" />
    </div>
  </el-drawer>

  <!-- 底部的部分 -->
  <div class="footer"></div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import api from '@/api'
import { getLabelType } from '@/types/zxy/labelType'
import Upload from '@/components/zxy/Upload.vue'
import { ElMessage } from 'element-plus'
import router from '@/router'
let options2 = ref([])
let options = ref([])
let arr = ref<Array<any>>([])
let arr2 = ref<Array<any>>([])
let arr3 = ref<Array<any>>([])

// const value2 = ref('')
// 获取slect的机构数据
const getOptions = async () => {
  const res = await api.team.getAllChcsOrgan()
  // console.log('获取的机构数据', res.data.data.rows)
  options.value = res.data.data.rows
  options.value.forEach((item: any) => {
    arr.value.push({
      name: item.name,
      id: item.id,
    })
  })
}

// 获取label的参数

let getLabelData = ref<getLabelType>({
  searchKey: '',
  page: 1,
  count: 10,
})

// 获取label的数据
const getAllLabel = async () => {
  const res = await api.team.getTeamLabel(getLabelData.value)
  // label数据
  console.log('label', res.data.data.result)
  options2.value = res.data.data.result
  options2.value.forEach((item: any) => {
    arr2.value.push({
      name: item.name,
      id: item.id,
    })
    arr3.value.push(false)
  })
}

let showOption = ref<any>([])
let showOption_copy = ref<any>([])
// 单个复选框
const checkboxchange = (e: any) => {
  // console.log('e', e)
  showOption_copy.value?.push(e.id)
}

// 点击返回时候清空数据并且关闭下拉框
const selectRef = ref<HTMLElement | null>(null)
const resetOption = () => {
  if (selectRef.value) {
    // 失去焦点关闭
    selectRef.value.blur()
  }
  arr3.value = arr3.value.map(() => false)
  // console.log('showOption.value', showOption.value)
  // showOption.value = []
  showOption_copy = []
}

// 全选反选按钮
const all_selcect = ref(false)
const all_selcect_copy = ref<any>([])
//全选反选逻辑,点击全选按钮发生变化时候，进行全选操作
const changeAllSelect = () => {
  console.log(all_selcect.value, '--------------------')
  // 全选的按钮展示的值

  arr3.value = arr3.value.map(() => all_selcect.value)
  if (arr2.value.length > 0) {
    arr2.value.forEach((item) => {
      all_selcect_copy.value?.push(item.id)
    })
    console.log('arr2---->', all_selcect_copy.value)
    showOption_copy = all_selcect_copy.value
  }
}

// 点击复选框中的确定时候，给绑定的数组赋值
const saveOptin = () => {
  // 点击全选按钮时候，如果此时全选，则显示所有的数据，否则选择点中的
  if (all_selcect_copy.value) {
    showOption_copy.value = all_selcect_copy.value
    all_selcect.value = false
  }
  showOption.value = showOption_copy.value
  // console.log('点击复选框中的确定时候，给绑定的数组赋值', showOption.value)
  if (selectRef.value) {
    // 失去焦点关闭
    selectRef.value.blur()
  }
  arr3.value = arr3.value.map(() => false)
}

const formSize = ref('default')

// 新增团队的参数
const AddTeamData = ref({
  name: '',
  picture: '',
  organId: '', //所属机构id
  labelIdStr: '', //标签id数组的JSON字符串
  doctorId: '', //团队管理者id(团队长)
})

// 上传图片
// 传递给子组件，此时pic为空，upload判断为新增
const pic = ref({ picure: '' })

//获取从子组件传的pic地址
const getPic = (arg: string) => {
  console.log('arg', arg)
  console.log('获取的地址', arg)
  // 将请求参数进行重新赋值
  AddTeamData.value.picture = arg
}

// 点击保存按钮，上传数据
const saveTeam = async () => {
  // 获取本地存储的用户id即医生id

  let result = await api.systemSetting.doctor.getDoctorDetailApi(localStorage.getItem('user_id'))
  AddTeamData.value.doctorId = result.data.data.id
  // 标签赋值
  AddTeamData.value.labelIdStr = showOption.value
  AddTeamData.value.labelIdStr = JSON.stringify(AddTeamData.value.labelIdStr)
  // console.log('------------', AddTeamData.value)
  const res = await api.team.AddTeamApi(AddTeamData.value)
  // console.log('新增结果', res.data.msg)
  if (res.data.code === 200) {
    ElMessage({
      message: res.data.msg,
      grouping: true,
      type: 'success',
    })
  }

  router.push('td')
}

// 返回按钮
const goback = () => {
  router.push('td')
}

// 获取到的 label值
let organId = ref('')
const getLabel = (s: string) => {
  // console.log(s, '--------')
  // 使用变化后获取到的id值进行获取团队信息
  organId.value = s
}


// 医生卡片渲染的参数
const doctorCardInfo = ref({
  name: '',
  role: '',
  picture: '',
  number: '',
  description: '',
  adept: '',
  signCount: {
    signCount: '',
  },
  createTime: '',
  creatorName: '',
  flag: 0,
  gender: '',
})

// 详情页面的团队
const teamDetail = ref([
  {
    oname: '',
    tname: '',
  },
])

// 医生状态的开关
const value3 = ref(0)

const getDoctorDetailInfo = async () => {
  let result = await api.systemSetting.doctor.getDoctorDetailApi(localStorage.getItem('user_id'))
  const res = await api.team.getDoctorDetailApi({ id: result.data.data.id })
  doctorCardInfo.value = res.data.data
  console.log(res.data.data, '---------详细信息---------')
  teamDetail.value = res.data.data.team
  console.log('teamDetail.value', teamDetail.value)
}

getDoctorDetailInfo()

//抽屉
const direction = ref('rtl')
const drawer = ref(false)
// 医生详情
const doctorInfo = () => {
  drawer.value = true
  console.log('医生详情')
}
onMounted(() => {
  // 获取select框所有机构的函数
  getOptions()
  // 获取label的函数
  getAllLabel()
})
</script>

<style lang="scss" scoped>
.team-add {
  width: 100vw;

  margin: auto;
  background-color: #fff;
}

.top-team::before {
  margin-left: 5px;
  margin-top: 5px;
  content: '';
  display: inline-block;
  width: 10px;
  height: 30px;
  background-color: skyblue;
  margin-right: 10px;
  border-radius: 6px;
  vertical-align: middle;
  /* 垂直居中对齐 */
}

.top-team {
  margin-top: 20px;
  font-size: 20px;
  display: flex;
  align-items: center;
}

.menu-wrapper {
  display: flex;
  flex-grow: 1;
}

.el-menu-demo .el-menu-item {
  text-align: left;
}

.top {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

// 中间部分
.team-middle {
  margin: 5px;
}

.team-middle-words {
  font-size: 20px;
  margin-top: 20px;
}

.line {
  margin: 10px;
}

.middile {
  margin: 10px;
}

/* 图片上传 */
.oganpic {
  margin-right: 50px;
}

// 团队chengyaun
.team-menenber {
  margin: 20px 5px;
  font-size: 20px;
}
</style>
